<template>

  <div class="bodyParent ">
    <div class="content-body">

      <span class="font18" style="line-height: 1">工具箱</span>
      <hr style="border: 1px solid #E9E9E9;background-color:#E9E9E9 ">

      <el-col class="table-conter">
        <el-row>

          <el-button class="div-tabs "   @click="ChangeTabs(1)" style="background: linear-gradient(180deg, #883BEB 0%, #1047C0 100%);color: #fff">
            <span>日历</span>
          </el-button>
          <el-button class="div-tabs ml30" @click="ChangeTabs(2)"  style="background: radial-gradient(circle, #C294D1 0%, #4B4A7E 100%);color: #FFFFFF">
            <span>计算器</span>
          </el-button>
          <el-button class="div-tabs ml30" @click="ChangeTabs(3)" style="background: linear-gradient(180deg, #883BEB 0%, #1047C0 100%);color: #FFFFFF">
            <span>天气</span>
          </el-button>
          <el-button class="div-tabs ml30" @click="ChangeTabs(4)" style="background: linear-gradient(180deg, #883BEB 0%, #1047C0 100%);color: #FFFFFF">
            <span>记事本</span>
          </el-button>


        </el-row>
        <hr style="border: 1px solid #E9E9E9;background-color:#E9E9E9 ">
      </el-col>

    </div>

  </div>

</template>

<script>
  import Tabs from '../../../../components/Tabs'

  export default {
    name: "utilsBox",
    components: {
      Tabs
    },
    methods: {
      ChangeTabs(index) {
        this.tabs = index;
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    },
    data() {
      return {
        totle: 7,
        Page: 1,
        tabs: 1,

      }
    }
  }
</script>

<style>

  #tablescontent .el-button {
    font-size: 16px;
  }

</style>

<style scoped>
  .ml30{
    margin-left: 30px;
  }
  .div-tabs {
    width: 94px;
    height: 94px;

  }

  .bodyParent {
    padding-left: 20px;
    width: 100%;
    height: 100%;

  }


  .content-body {
    padding: 26px 32px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .content-body hr {
    margin-top: 22px;
    margin-bottom: 26px;

  }


</style>
